<template>
  <view>
    <!-- 顶部区域 -->
    <view class="smart-page-head">
      <view class="smart-page-head-title">swiper 滑块视图</view>
    </view>
    <view class="smart-padding-wrap">
      <swiper circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval">
        <!-- 给 swiper-item 添加点击事件，跳转到页面 A -->
        <swiper-item @click="gotoPageA">
          <view class="swiper-item smart-bg-blue">A</view>
        </swiper-item>
        <!-- 给 swiper-item 添加点击事件，跳转到页面 B -->
        <swiper-item @click="gotoPageB">
          <view class="swiper-item smart-bg-green">B</view>
        </swiper-item>
        <!-- 给 swiper-item 添加点击事件，跳转到页面 C -->
        <swiper-item @click="gotoPageC">
          <view class="swiper-item smart-bg-red">C</view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 500
    };
  },
  methods: {
    // 跳转到页面 A 的方法
    gotoPageA() {
      uni.navigateTo({
        url: '/pages/pageA/pageA' // 替换为你要跳转的页面 A 的实际路径
      });
    },
    // 跳转到页面 B 的方法
    gotoPageB() {
      uni.navigateTo({
        url: '/pages/pageB/pageB' // 替换为你要跳转的页面 B 的实际路径
      });
    },
    // 跳转到页面 C 的方法
    gotoPageC() {
      uni.navigateTo({
        url: '/pages/pageC/pageC' // 替换为你要跳转的页面 C 的实际路径
      });
    }
  }
};
</script>

<style>
/* 这里可以添加样式 */
</style>